<!-- 用户 -->
<template>
  <IonPage>
    <IonContent>
      <div class="main">
        <div class="user">
          <img src="../assets/images/logo1.png" class="avatar" alt="" />
          <span class="name">Name</span>
          <span class="text">已经坚持两天了</span>
          <span class="chang_image">更换头像</span>
        </div>
        <ul class="user_card">
          <li @click="$router.push('/setting')">
            <img src="../assets/images/setting3.png" alt="" /><span>设置</span>
          </li>
          <li>
            <img src="../assets/images/about_us.png" alt="" /><span
              >关于我们</span
            >
          </li>
          <li>
            <img src="../assets/images/copyright.png" alt="" /><span
              >版权声明</span
            >
          </li>
          <li @click="exitThisApp">
            <img src="../assets/images/quit.png" alt="" /><span>退出</span>
          </li>
        </ul>
      </div>
      <!-- 底部导航栏 -->
      <div class="bottom_nav">
        <IonText router-link="/main"
          ><img src="../assets/images/calender2.png"
        /></IonText>
        <IonText router-link="/clock"
          ><img src="../assets/images/clock.png"
        /></IonText>
        <IonText router-link="/main"
          ><img src="../assets/images/add.png" 
        /></IonText>
        <IonText router-link="/table"><img src="../assets/images/view.png" /></IonText>
        <IonText router-link="/user">
          <img src="../assets/images/people.png" />
        </IonText>
      </div>
    </IonContent>
  </IonPage>
</template>
<style scoped>
.main {
  padding: 2vw;
  height: 100vh;
  width: 100vw;
}
.user {
  position: relative;
  margin-top: 8vh;

  width: vw;
  /* height: ; */
}
.avatar {
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  margin-left: 10vw;
}
.name {
  position: absolute;
  left: 30vw;
  top: 2vh;
  padding-left: 2vw;
  font-size: 5vw;
  font-weight: bold;
}
.text {
  position: absolute;
  top: 6vh;
}
.chang_image {
  position: absolute;
  right: 8vw;
  top: 4vh;
  font-weight: bold;
}
.user_card {
  padding-left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.user_card li {
  height: 10vh;
  width: 85vw;
  border: 0.4vw solid black;
  border-radius: 5vw;
  /* margin: 0 auto; */

  margin: 1vh 0vw;
  display: flex;
  align-items: center;
}
.user_card img {
  height: 5vh;
  margin-left: 8vw;
  margin-right: 6vw;
}
.bottom_nav {
  width: 100%;
  bottom: 0;
  background-color: white;
  /* height: 10vh; */
  display: flex;
  justify-content: space-between;
  /* flex: 1; */
  position: fixed;
}

.bottom_nav img {
  width: 10vw;
  height: 10vw;
  /* margin: 2vh 5vw; */
}
</style>
<script lang="ts">
import { IonPage, IonContent, IonText } from "@ionic/vue";
import { App } from "@capacitor/app";
export default {
  data() {},
  components: {
    IonPage,
    IonContent,
    IonText,
  },
  methods: {
    exitThisApp() {
      // 退出页面
      App.exitApp();
    },
    Additem(){
      this.$router.push('/main')
    }
  },
};
</script>
